<template>
	<el-dialog title="新建表" v-model="visible" :width="1130" destroy-on-close @closed="$emit('closed')">
		<el-main>
			<el-form ref="dialogForm" :model="form" :rules="rules" label-position="right">
				<sc-title title="表配置"></sc-title>
				<el-row>
					<el-col :span="9">
						<el-form-item label="表名" prop="tableName" style="width: 90%">
							<el-input v-model="form.tableName" placeholder="请输入表名，例如以sys_打头"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="9">
						<el-form-item label="表注释" prop="tableComment" style="width: 90%">
							<el-input v-model="form.tableComment" placeholder="请输入表注释，言简意赅"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="继承基类" prop="extendBaseEntity">
							<el-switch v-model="form.extendBaseEntity" :active-value="true" :inactive-value="false"></el-switch>
						</el-form-item>
					</el-col>
				</el-row>
				<sc-title title="字段配置"></sc-title>
				<el-form-item prop="columnList">
					<sc-form-table v-model="form.columnList" :addTemplate="columnData" drag-sort placeholder="暂无数据">
						<el-table-column prop="columnComment" label="字段注释" width="150" align="center">
							<template #default="scope">
								<el-input v-model="scope.row.columnComment" placeholder="字段注释"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="columnName" label="字段名" width="150" align="center">
							<template #default="scope">
								<el-input v-model="scope.row.columnName" placeholder="不填则根据注释生成"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="columnType" label="字段类型" width="150" align="center">
							<template #default="scope">
								<el-select v-model="scope.row.columnType" placeholder="请选择" style="width: 100%;">
									<el-option v-for="(item, index) in columnTypeList" :key="index" :label="item.columnType" :value="item.columnType"></el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="dataLength" label="字段长度" width="130" align="center">
							<template #default="scope">
								<el-input-number size="small" v-model="scope.row.dataLength" :min="0" style="width: 105px"></el-input-number>
							</template>
						</el-table-column>
						<el-table-column prop="decimalLength" label="字段小数位" width="110" align="center">
							<template #default="scope">
								<el-input-number size="small" v-model="scope.row.decimalLength" :min="0" :max="127" style="width: 85px"></el-input-number>
							</template>
						</el-table-column>
						<el-table-column prop="defaultValue" label="默认值" width="140" align="center">
							<template #default="scope">
								<el-input v-model="scope.row.defaultValue" placeholder="默认值"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="columnPk" label="主键" width="50" align="center">
							<template #default="scope">
								<el-checkbox v-model="scope.row.columnPk"></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column prop="columnNotNull" label="非空" width="50" align="center">
							<template #default="scope">
								<el-checkbox v-model="scope.row.columnNotNull"></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column prop="columnIncrement" label="自增" width="50" align="center">
							<template #default="scope">
								<el-checkbox v-model="scope.row.columnIncrement"></el-checkbox>
							</template>
						</el-table-column>
					</sc-form-table>
				</el-form-item>
			</el-form>
		</el-main>
		<template #footer>
			<el-button @click="visible=false">取 消</el-button>
			<el-button type="primary" :loading="isSaving" @click="submit()">导 入</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			visible: false,
			isSaving: false,
			columnTypeList: [],
			// 表单数据
			form: {
				tableName: null,
				tableComment: null,
				extendBaseEntity: true,
				columnList: []
			},
			// 表单验证规则
			rules: {
				tableName: [
					{required: true, message: '请输入表名', trigger: 'blur'}
				],
				tableComment: [
					{required: true, message: '请输入表注释', trigger: 'blur'}
				],
				extendBaseEntity: [
					{required: true, message: '请选择是否继承基类', trigger: 'blur'}
				],
				columnList: [
					{required: true, message: '请输入字段', trigger: 'blur'}
				]
			},
			columnData: {
				columnComment: null,
				columnName: null,
				columnType: 'varchar',
				dataLength: 255,
				decimalLength: null,
				defaultValue: null,
				columnPk: false,
				columnNotNull: false,
				columnIncrement: false
			}
		}
	},
	mounted() {
		this.getColumnType();
	},
	methods: {
		// 显示
		open() {
			this.visible = true;
			return this;
		},
		async getColumnType() {
			this.columnTypeList = await this.$API.gen.columnMap.list.get();
		},
		// 表单提交
		submit() {
			this.$refs.dialogForm.validate((valid) => {
				if (valid) {
					this.isSaving = true;
					this.$API.gen.table.create.post(this.form).then(() => {
						this.$emit('success');
						this.visible = false;
						this.$message.success("创建成功");
					}).catch(() => {
						this.isSaving = false;
					});
				}
			})
		}
	}
}
</script>

<style scoped>
</style>
